<template>
  <div class="permission-container">
    <div class="app-container">
      <!-- 表格 -->
      <el-card>
        <div style="text-align: right; margin-bottom: 20px">
          <el-button type="primary" size="small" @click="hAdd('0',1)">添加权限</el-button>
        </div>
        <el-table border :data="list" row-key="id">
          <el-table-column label="名称" prop="name"/>
          <el-table-column label="标识" prop="code"/>
          <el-table-column label="描述" prop="description"/>
          <el-table-column label="操作">
            <template #default="{row}">
              <el-button type="text" v-if="row.type===1" @click="hAdd(row.id,2)">添加</el-button>
              <el-button type="text" @click="hEdit(row)">编辑</el-button>
              <el-button type="text" @click="hDel(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 弹框 -->
      <el-dialog :visible.sync="showDialog" :title="isEs?'编辑':'添加'" @close="reset">
  <!-- 表单内容 -->
  <el-form label-width="100px" ref="ref" :model="formData" :rules="rules">
    <el-form-item label="权限名称" prop="name">
      <el-input v-model="formData.name" />
    </el-form-item>
    <el-form-item label="权限标识" prop="code">
      <el-input v-model="formData.code" />
    </el-form-item>
    <el-form-item label="权限描述">
      <el-input v-model="formData.description" />
    </el-form-item>
    <el-form-item label="权限启用">
      <el-switch
        v-model="formData.enVisible"
        active-text="启用"
        active-value="1"
        inactive-text="不启用"
        inactive-value="0"
      />
    </el-form-item>
  </el-form>

  <template #footer>
    <div style="text-align: right;">
      <el-button @click="showDialog = false">取消</el-button>
      <el-button type="primary" @click="hSubmit">确定</el-button>
    </div>
  </template>
</el-dialog>
    </div>
  </div>
</template>

<script>

import { treeForm } from '@/utils'
import { getPermissionList ,addPermission,updatePermission,delPermission} from '@/api/permissions'

export default {

  data() {
    var validatePass = (rule, value, callback) => {
      let add = this.originList.map(item=> item.code)
      if(this.isEs){
        add=this.originList.filter(item=>item.id!==this.formData.id).map(item=>item.code)
      }
      if(add.includes(value)){
        callback(new Error('code 内容一样'));
      }else{
        callback()
      }
    }

    var validate = (rule, value, callback) => {
      let sss = this.originList.filter(item => item.pid !== this.formData.pid).map(item=>item.name)
      if(this.isEs){
        sss=this.originList.filter(item=>item.id==this.formData.pid).map(item=>item.name)
      }
      if(sss.includes(value)){
        callback(new Error('code 内容一样'));
      }else{
        callback()
      }
    }

    return {
      isEs:false,
      showDialog:false,
      list:[],
      originList:[],
      formData:{
        name:'',
        code:'',
        description:'',
        enVisible:'',
        pid:'',
        type:''
      },
      rules:{
        name:[
          { validator: validate, trigger: 'blur' },
          { required: true, message: '请输入活动名称', trigger: 'blur' },
        ],
        code:[
          { validator: validatePass, trigger: 'blur' },
          { required: true, message: '请输入活动名称', trigger: 'blur' },
        ]
      }
    };
  },
  created(){
    this.loadPermissionList()
  },
  methods:{
    // 重置
    reset(){
      this.$refs.ref.resetFields()
      this.formData={
        name:'',
        code:'',
        description:'',
        enVisible:'',
        pid:'',
        type:''
      }
    },
    // 删除
   async hDel(id){
      if(!confirm('是否确认删除')) return this.$message.error('取消删除')
      await delPermission(id)
      this.loadPermissionList()
      this.$message.success('删除完成')
    },
    // 编辑
   async EditPermission(){
      try {
        await updatePermission(this.formData)
        this.loadPermissionList()
        this.showDialog=false
      } catch (error) {
        console.log();
      }
    },
    // 编辑
    hEdit(row){
      this.isEs=true
      this.showDialog=true
      this.formData={...row}
    },
    // 新增
   async doAdd(){
      try {
       const res =  await addPermission(this.formData)
       console.log(res);
        this.loadPermissionList()
        this.showDialog=false
      } catch (error) {
        console.log();
      }
    },
    // 确定
    hSubmit(){
      this.$refs.ref.validate((valid)=>{
        if(!valid) return
      this.isEs?this.EditPermission():this.doAdd()
      })
      
    },
    // 添加权限
    hAdd(pid,type){
      this.formData.pid=pid
      this.formData.type=type
      this.isEs=false
      this.showDialog=true
    },
    // 获取权限列表
    async loadPermissionList(){
    
      try {
        const res = await getPermissionList()
        // console.log('getPermissionList', res)
        this.list= treeForm(res.data)
        this.originList = res.data.map(({ id, pid, name, code }) => ({ id, pid, name: name.trim(), code }))
        // 保存数据
      } catch (err) {
        console.log('getPermissionList', err)
      }
    },
  },
}
</script>
